<template>
  <div class="blackView">
    <Map
      v-if="laneMsgControl"
      :load="getMap1Area"
      :map-center="mapsCenterWkt"
      :zoom="15"
      :maxzoom="19"
      :minzoom="17"
      class="blackView"
    ></Map>
    <div>
      <LeftTip :act="4" :tab="4"></LeftTip>
    </div>
  </div>
</template>

<script>
import Map from '@/components/map1.vue'
import LeftTip from './tab/leftTip.vue'
import{
  getRidAndPointVolume
} from '@/api/api.js';
export default {
  name: 'point',
  components: {
    Map,
    LeftTip
  },
  data() {
    return {
      mapsCenterWkt: [120.141409, 30.319025],
      laneMsgControl: true,
      removeMarkers: []
    }
  },
  created(){
    
  },
  mounted(){
    
  },

  methods: {
    getMap1Area(){
      this.getPointData()
    },
    async getPointData(){
      let res = await getRidAndPointVolume()
      if(res.data.data){
        this.setPoint(res.data.data)
      }
    },
    setPoint(data){
      console.log(data)
      if(window.location.href.indexOf('point') == '-1') return
      data.forEach((item, index) => {
        let centerWkt = item.wkt.split(',')
        let marker = new AMap.Marker({
          position: new AMap.LngLat(centerWkt[0], centerWkt[1]),
          content: this.getCrossDisInfoMarkerIcon(index, 1, item),
          offset: new AMap.Pixel(-10, -10)
        })
        window.map1.add(marker)
        this.removeMarkers.push(marker)
      })
    },
    getCrossDisInfoMarkerIcon(index, type, item){
      let crossClass = ''
      switch(type){
        case 1:
          crossClass = 'crossAreaA'
          break;
        case 2:
          crossClass = 'crossAreaB'
          break;
        case 3:
          crossClass = 'crossAreaC'
          break;
        case 4:
          crossClass = 'crossAreaD'
          break;
        case 5:
          crossClass = 'crossAreaE'
          break;
        case 6:
          crossClass = 'crossAreaF'
          break;
        case 7:
          crossClass = 'crossAreaG'
          break;
        case 8:
          crossClass = 'crossAreaH'
          break;
        case 9:
          crossClass = 'crossAreaI'
          break;
        case 10:
          crossClass = 'crossAreaJ'
          break;
        case 11:
          crossClass = 'crossAreaK'
          break;
      }
      let el = document.createElement("div");
      el.className = `crossArea ${crossClass}`;
      el.tabIndex = index;
      // el.innerHTML = `<div class="crossAreaText">${item.volume}</div>`;
      el.id = `id_${index}`;
      return el;
    }
    
  },
  beforeDestroy(){
  }
}
</script>

<style lang="less" scoped>

</style>